<!DOCTYPE html>
<html lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<title>SVG碎片整理 | Miles`s</title>

<link rel="stylesheet" href="https://mada.gitee.io/notes//css/styles.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://mada.gitee.io/notes//js/highlight.js"></script>






<div class="container">
    <nav class="navbar level">
      <div class="navbar-brand">
          <a class="nav-item" href="https://mada.gitee.io/notes/"><h1 class="title is-3">Miles`s</h1></a>
      </div>           
      <div class="navbar-menu has-text-centered is-active">
          <div class="navbar-end is-centered">
              
           </div>
      </div>
    </nav>
  </div>
<div class="container">
  <h2 class="subtitle is-6">May 12, 2018</h2>
  <h1 class="subtitle is-size-4-mobile is-size-3-desktop">SVG碎片整理</h1>
  <div class="content">
    

<blockquote>
<p>项目开发中遇到的 SVG 碎片知识收集。</p>
</blockquote>

<h1 id="svg-碎片整理">SVG 碎片整理</h1>

<h2 id="svg-foreignobject">SVG <foreignObject></h2>

<p><a href="http://www.zhangxinxu.com/wordpress/2017/08/svg-foreignobject/">张鑫旭文摘</a></p>

<blockquote>
<p>SVG和CSS几乎可以看成是同一个年代出来的东西，但是在Web界面展示这块，CSS长期统领江山，SVG偃旗息鼓，直到这些年，SVG开始乘势而上。
然而需求是千变万化的，当我们使用SVG实现一些视觉表现精湛的效果的时候，免不了会有增加一段描述文字的需求。呵呵，这个时候SVG怕是要傻眼了，SVG的<text>元素应付多行文字实在不擅长，如果SVG中的文字可以如同CSS中的表现一样就好了？</p>
</blockquote>

<p><code>&lt;foreignObject&gt;</code> 元素的作用是可以在其中使用具有其它XML命名空间的XML元素，换句话说借助<code>&lt;foreignObject&gt;</code>标签，我们可以直接在SVG内部嵌入XHTML元素.</p>

<pre><code class="language-xml">&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
  &lt;foreignObject width=&quot;120&quot; height=&quot;50&quot;&gt;
      &lt;body xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
        &lt;p&gt;文字。&lt;/p&gt;
      &lt;/body&gt;
    &lt;/foreignObject&gt;
&lt;/svg&gt;
</code></pre>

  </div>
</div>
<div class="container has-text-centered">
    
</div>

<div class="container has-text-centered">
  
</div>
<section class="section">
  <div class="container has-text-centered">
    <p></p>
  </div>
</section>


